<div class="service-config">
    <div class="panel panel-default">
        <div class="panel-heading" style="font-weight: bold;font-size: 16px;background:none;font-weight:normal;">
            高级配置
        </div>
        <hr style="visibility:visible;margin:8px 0"  />
        <div class="panel-body" style="padding: 30px 40px;">
            <div class="row">
                <div class="col-md-2" style="padding-top: 8px;">
                    <h3 style="font-weight:normal;">服务高可用</h3>
                </div>
                <div class="col-md-10">
                    <label style="font-size: 12px; font-weight: normal;">POD数量&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <input ng-model="dc.spec.replicas" min="0" max="10" style="width: 80px;display: inline-block;"
                           type="number" class="form-control">
                    <hr style="visibility:visible;"/>
                    <div ng-if="false">
                        <label style="font-size: 12px; font-weight: normal;">自动伸缩&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <c-checkbox checked="rubustCheck"></c-checkbox>
                        <br>
                        <div ng-if="rubustCheck">
                            <label style="font-size: 12px; font-weight: normal;  margin-top: 35px;">资源阈值&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <span style="font-size: 12px">POD最小数量  <input min="0" max="10"
                                                                          style="width: 80px;display: inline-block;"
                                                                          type="text" class="form-control"></span>
                            <span style="font-size: 12px">POD最大数量  <input min="0" max="10"
                                                                          style="width: 80px;display: inline-block;"
                                                                          type="text" class="form-control"></span>
                            <span style="font-size: 12px">CPU平均利用率 <input min="0" max="10"
                                                                          style="width: 80px;display: inline-block;"
                                                                          type="text" class="form-control"></span>
                        </div>
                        <hr style="visibility:visible;"/>
                    </div>
                    <label ng-show="false" style="font-size: 12px; font-weight: normal;">重启策略&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div ng-show="false" class="dropdown dropdown-select" style="width: 200px;">
                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                            <span>{{dc.spec.template.spec.restartPolicy}}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;"
                                   ng-click="dc.spec.template.spec.restartPolicy = 'Always'">Always</a>
                                <a href="javascript:;" ng-click="dc.spec.template.spec.restartPolicy = 'OnFailure'">OnFailure</a>
                                <a href="javascript:;"
                                   ng-click="dc.spec.template.spec.restartPolicy = 'Never'">Never</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--<hr style="margin-top: 20px;visibility:visible;">-->

            <div class="row">
                <div class="col-md-2" style="padding-top: 5px">
                    <h3 style="font-weight:normal;">路由设置</h3>
                </div>
                <div class="col-md-10">
                    <c-checkbox ng-if="portsArr.length>0" checked="grid.route"></c-checkbox>
                    <span class="my-checkbox" ng-if="!portsArr.length" ng-click="grid.noroute=true">
                        <span class="checkbox-check">
                            <span class="check-btn"></span>
                        </span>
                        <!--<small >请选择一个TPC端口</small>-->
                        <small ng-if="grid.noroute" class="fa fa-info-circle err-tip">请返回基础设置添加端口</small>
                    </span>

                    <br>
                    <div ng-if="grid.route" style="margin-top: 35px;">

                        <div class="dropdown dropdown-select" style="width: 80px;">
                            <button class="btn dropdown-toggle" data-toggle="dropdown" ng-click="updatePorts()">
                                <span>{{grid.port}}</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" style="width: 80px;">
                                <li ng-repeat="port in grid.ports">
                                    <a href="javascript:;" ng-click="grid.port = port">{{port+'(TCP)'}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="dropdown dropdown-select" style="width: 120px; min-width: 120px;">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                <span>{{grid.cname}}</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" style="width: 120px; min-width: 120px">
                                <li>
                                    <a href="javascript:;" ng-click="grid.cname = '系统域名'">{{'系统域名'}}</a>
                                </li>
                                <li>
                                    <a href="javascript:;" ng-click="grid.cname = '自定义域名'">{{'自定义域名'}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="dropdown dropdown-select" style="width: 413px; border: 1px solid #ccc;">
                            <div class="input-group" style="width:100%">
                                <input style="width: 35%;display: inline-block;border: none;font-size: 12px;height: 32px;"
                                       ng-model="grid.host" type="text" class="form-control" placeholder="请输入域名前缀">
                                <span class="input-group-btn" style="width:65%;display: inline-block;">
                                <span ng-if="grid.cname == '系统域名'"
                                      style="line-height: 21px;width:100%;display: inline-block;padding: 6px 12px;color: black;border-color:#8c8c8c;height: 32px;font-size: 12px;"
                                >{{grid.suffix}}
                                </span>
                                <span ng-if="grid.cname == '自定义域名'" style="line-height: 21px;width:100%;display: inline-block;padding: 6px 12px;color: black;border-color:#8c8c8c;height: 32px;font-size: 12px;">需将自定义域名指向router.app.dataos.io</span>
                                </span>
                            </div>
                            <!-- /input-group -->
                        </div>
                        <br>
                        <div>
                            <div class="dropdown dropdown-select" style="width: 620px">
                                <br/>
                                <label style="font-size: 12px; font-weight: normal;">TLS设置&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <br/>
                                <button class="btn dropdown-toggle" data-toggle="dropdown">
                                    <span>{{grid.tlsset||'None'}}</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:;" ng-click="grid.tlsset = 'None'">{{'None'}}</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" ng-click="grid.tlsset = 'Edge'">{{'Edge'}}</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;"
                                           ng-click="grid.tlsset = 'Passthrough'">{{'Passthrough'}}</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;"
                                           ng-click="grid.tlsset = 'Re-encrypt'">{{'Re-encrypt'}}</a>
                                    </li>
                                </ul>
                            </div>
                            <div ng-if="grid.tlsset=='Edge'">
                                <br>

                                <label style="font-size: 12px; font-weight: normal;">HTTP协议设置&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <br/>

                                <!--<p style="margin-top: 35px;font-size: 18px;">HTTP协议设置</p>-->
                                <div class="dropdown dropdown-select" style="width: 620px;">
                                    <button class="btn dropdown-toggle" data-toggle="dropdown">
                                        <span>{{grid.httpset}}</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="javascript:;" ng-click="grid.httpset = 'None'">{{'None'}}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" ng-click="grid.httpset = 'Allow'">{{'Allow'}}</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" ng-click="grid.httpset = 'Redirect'">{{'Redirect'}}</a>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="timeline timee col-md-12" style="margin-top: 22px;padding: 0;width:620px;">
                                <ul style="border: none;padding:0px;">
                                    <li ng-if="grid.tlsset=='Edge'||grid.tlsset=='Re-encrypt'" style="left:0;width:100%;top:0;margin-bottom:22px;">
                                        <label style="font-size: 12px; font-weight: normal;">证书&nbsp;&nbsp;&nbsp;&nbsp;</label><br/>
                                        <div class="row" style="margin:0px;">
                                            <div class="container-fluid diantiao col-sm-12" style="margin-left: 0;padding:0px;border: 1px solid #c9c9c9;">
                                                <div class="row" style="margin:0px;">
                                                    <div class="col-md-10">
                                                        <span class="form-control" style="border: none;height:30px;">{{grid.zsfile.key}}</span>
                                                    </div>
                                                    <div class="col-md-2" style="margin:0px;pading:0px; text-align: right;padding:0px;">
                                                        <div class="dropdown dropdown-select">
                                                            <div class="input-group">

                                                    <span class="input-group-btn" style="position: relative;">
                                                        <span class="btn btn-default btn_file"
                                                              style="margin:0px"
                                                              ng-click="addzhengshu()">上传
                                                            <input type="file" class="file-input" id="zsfile" value="选择" style="height:auto;"/>
                                                        </span>
                                                    </span>


                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </li>
                                    <li ng-if="grid.tlsset=='Edge'||grid.tlsset=='Re-encrypt'" style="left:0;width:100%;top:0;margin-bottom:22px;">
                                        <label style="font-size: 12px; font-weight: normal;">密钥&nbsp;&nbsp;&nbsp;&nbsp;</label><br/>
                                        <div class="row" style="margin:0px;">
                                            <div class="container-fluid diantiao col-sm-12" style="margin-left: 0;padding:0px;border: 1px solid #c9c9c9;">
                                                <div class="row" style="margin:0px;">
                                                    <div class="col-md-10">
                                                        <span class="form-control" style="border: none;height:30px;">{{grid.syfile.key}}</span>
                                                    </div>
                                                    <div class="col-md-2" style="margin:0px;pading:0px; text-align: right;padding:0px;">
                                                        <div class="dropdown dropdown-select">
                                                            <div class="input-group">
                                                    <span class="input-group-btn" style="position: relative;">
                                                        <span class="btn btn-default btn_file"
                                                              style="margin:0px;"
                                                              ng-click="addsy()">上传
                                                            <input type="file" class="file-input" id="syfile" value="选择" style="height:auto;"/>
                                                        </span>
                                                    </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li ng-if="grid.tlsset=='Edge'||grid.tlsset=='Re-encrypt'" style="left:0;width:100%;top:0;margin-bottom:22px;">
                                        <label style="font-size: 12px; font-weight: normal;">CA证书&nbsp;&nbsp;&nbsp;&nbsp;</label><br/>
                                        <div class="row" style="margin:0px;">
                                            <div class="container-fluid diantiao col-sm-12" style="margin-left: 0;padding:0px;border: 1px solid #c9c9c9;">
                                                <div class="row" style="margin:0px;">
                                                    <div class="col-md-10">
                                                        <span class="form-control" style="border: none;height:30px;">{{grid.cafile.key}}</span>
                                                    </div>
                                                    <div class="col-md-2" style="margin:0px;pading:0px; text-align: right;padding:0px;">
                                                        <div class="dropdown dropdown-select">
                                                            <div class="input-group">
                                                    <span class="input-group-btn" style="position: relative;">
                                                        <span class="btn btn-default btn_file"
                                                              style="margin:0px;"
                                                              ng-click="addca()">上传
                                                            <input type="file" class="file-input" id="cafile" value="选择" style="height:auto;"/>
                                                        </span>
                                                    </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li ng-if="grid.tlsset=='Re-encrypt'" style="left:0;width:100%;top:0;margin-bottom:22px;">
                                        <label style="font-size: 12px; font-weight: normal;">目标CA证书&nbsp;&nbsp;&nbsp;&nbsp;</label><br/>
                                        <div class="row" style="margin:0px;">
                                            <div class="container-fluid diantiao col-sm-12" style="margin-left: 0;padding:0px;border: 1px solid #c9c9c9;">
                                                <div class="row" style="margin:0px;">
                                                    <div class="col-md-10">
                                                        <span class="form-control" style="border: none;height:30px;">{{grid.mcafile.key}}</span>
                                                    </div>
                                                    <div class="col-md-2" style="margin:0px;pading:0px; text-align: right;padding:0px;">
                                                        <div class="dropdown dropdown-select">
                                                            <div class="input-group">
                                                    <span class="input-group-btn" style="position: relative;">
                                                        <span class="btn btn-default btn_file"
                                                              style="margin:0px;"
                                                              ng-click="addmca()">上传
                                                            <input type="file" class="file-input" id="mcafile" value="选择" style="height:auto;"/>
                                                        </span>
                                                    </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                               </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 20px;visibility:visible;">

            <div class="row">
                <div class="col-md-2">
                    <h3 style="font-weight:normal;">后端服务绑定</h3>
                </div>
                <div class="col-md-10" ng-if="!bsi.items.length">
                    <span>无</span>
                    <!--<a href="javascript:;" class="href-add">-->
                    <!--<i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;<span style="font-size: 12px">创建</span>-->
                    <!--</a>-->
                </div>
                <div class="col-md-10 col-md-offset-2" ng-if="bsi.items.length">
                    <div class="panel panel-default sub-panel">
                        <!--<div class="panel-heading">-->
                        <!--后端服务实例-->
                        <!--</div>-->
                        <div class="panel-body" style="padding-bottom: 0;">
                            <div class="row">
                                <div class="col-md-6" ng-repeat="item in bsi.items">
                                    <div class="tabandimage" ng-class="{'selected': item.bind}"
                                         ng-click="item.bind = !item.bind">
                                        <i class="faa faa-image faa-zn-size" style="float: left;margin-right: 10px;"></i>
                                        <i class="faa faa-image-mark" ng-show="item.bind"></i>
                                        <p style="margin: 10px 0 5px 0;">{{item.metadata.name}}</p>
                                        <p>{{item.spec.provisioning.backingservice_name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 20px;visibility:visible;">

            <div class="row">
                <div class="col-md-2">
                    <h3 style="font-weight:normal;">环境变量设置</h3>
                </div>
                <div class="col-md-10">
                    <a href="javascript:;" class="href-add" ng-click="addEnv()">
                        <i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;<span style="font-size: 12px">创建环境变量</span>
                    </a>
                </div>
                <div class="col-md-9 col-md-offset-2" ng-if="envs.length>0">
                    <div class="panel panel-default sub-panel">
                        <!--<div class="panel-heading">-->
                        <!--环境变量设置-->
                        <!--</div>-->

                        <div class="panel-body" style="padding-bottom: 20px;">
                            <span ng-if="envs.length > 0">
                                <div class="row" style="margin-bottom:10px">
                                    <div class="col-md-5">键</div>
                                    <div class="col-md-7">值</div>
                                </div>
                        <div class="row key-value-bar" style="margin-bottom: 15px" ng-repeat="env in envs">
                            <div class="col-md-5">

                                <div style="overflow: hidden">
                                    <input ng-model="env.name" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div style="overflow: hidden">
                                    <input ng-model="env.value" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-1" style="line-height: 36px;">
                                <a href="javascript:;" ng-click="delEnv($index)" class="fa fa-lg fa-times-circle"></a>
                            </div>
                        </div>
                    </span>
                        </div>
                        <small ng-show="checkEnv" class="fa fa-info-circle err-tip"
                               style="margin-left: 36px; margin-bottom: 15px;">&nbsp;环境变量输入有误，请重新输入
                        </small>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 20px;visibility:visible;">

            <div class="row">
                <div class="col-md-2">
                    <h3 style="font-weight:normal">自动部署</h3>
                </div>
                <div class="col-md-5">
                    <label ng-class="{'active': grid.configChange}" ng-click="grid.configChange=!grid.configChange"
                           style="cursor: pointer;">
                        <i class="faa faa-check"></i>
                        &nbsp;&nbsp;配置变化触发自动部署
                    </label>
                </div>
            </div>
            <hr style="margin-top: 20px;visibility:visible;">
            <div class="row">
                <div class="col-md-2" style="padding-top: 5px">
                    <h3 style="font-weight:normal;">配额限制</h3>
                </div>
                <div class="col-md-10">
                    <c-checkbox checked="quota.doquota"></c-checkbox>
                    <br>
                    <div ng-if="quota.doquota">
                        <div class="col-md-12" style="padding: 0;">
                            <div class="col-md-4"style="padding: 0;">
                                <input class="form-control" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,'');}).call(this)" ng-model="quota.cpu" style="margin-top: 10px; width: 100%;" type="text" name="num" required placeholder="">
                                <small class="fa fa-info-circle err-tip" ng-if="grid.cpuerr" style="margin-top: 20px;">
                                    提示：您输入数量超过可用数量</small>
                                <small class="fa fa-info-circle err-tip" ng-if="grid.cpunullerr" style="margin-top: 20px;">
                                    提示：您输入cpu为空</small>
                                <small class="fa fa-info-circle err-tip" ng-if="grid.cpunumerr" style="margin-top: 20px;">
                                    提示：您输入数数值不合法</small>
                            </div>
                            <div class="col-md-2"style="padding: 0;text-align: center;line-height: 54px;">
                                可用CPU:{{grid.cpunum}}个
                            </div>
                            <div class="col-md-3"style="padding: 0;">
                                <input class="form-control" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,'');}).call(this)" ng-model="quota.memory" style="margin-top: 10px; width: 100%;" type="text" name="num" required placeholder="">
                                <small class="fa fa-info-circle err-tip" ng-if="grid.memoryerr" style="margin-top: 20px;">
                                    提示：您输入数量超过可用数量</small>
                                <small class="fa fa-info-circle err-tip" ng-if="grid.memorynullerr" style="margin-top: 20px;">
                                    提示：您输入内存为空</small>
                                <small class="fa fa-info-circle err-tip" ng-if="grid.memorynumerr" style="margin-top: 20px;">
                                    提示：您输入数数值不合法</small>
                            </div>
                            <div class="col-md-1"style="padding: 0;">
                                <div class="dropdown">
                                    <button id="btnout" class="btn btn-default dropdown-toggle select" style="margin-top: 10px;" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        {{quota.unit}}
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" style="min-width:auto;" aria-labelledby="dropdownMenu1">
                                    <li><a ng-click="quota.unit='MB'">MB</a></li>
                                    <li><a ng-click="quota.unit='GB'">GB</a></li>
                                    </ul>
                                </div>

                            </div>
                            <div class="col-md-2"style="padding: 0;text-align: center;line-height: 54px;">
                                可用内存:{{grid.megnum}}GB
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 20px;visibility:visible;">
        </div>
    </div>
</div>
<style>
    .file-input {
        position: absolute;
        width: 54px;
        height: 34px;
        top: 0;
        right: 0;
        filter: alpha(opacity:0);
        opacity: 0;
    }
    #btnout {
        background: #e0e0e0;
        color: #000;
    }
    #btnout:focus {
        background: #e0e0e0;
    }
    #btnout:hover {
        color: black;
    }
    .faa-zn-size{
        background-size:contain;
    }
    .dropdown-menu > li > a{height:auto!important;}


</style>